<template>
    <div>
    <el-table
    :data="goods"
    style="width: 100%"
    max-height="450">
    <el-table-column
      prop="id"
      label="id"
      width="50">
    </el-table-column>
    <el-table-column
      prop="picture"
      label="产品图"
      width="120">
        <!--插入图片链接的代码-->
       <!--加入下面的内容,scope.row代表这一行,picture是显示这一行的哪个字段-->
      <template slot-scope="scope">
        <img :src="scope.row.picture" alt="" width="60px" height="60px">
      </template>
    </el-table-column>
    <el-table-column
      prop="intorduce"
      label="介绍"
      width="460">
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格"
      width="50">
    </el-table-column>
    <el-table-column
      prop="type"
      label="类别"
      width="100">
    </el-table-column>
    <el-table-column
      prop="age"
      label="适用年龄"
      width="100">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="80">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, goods)"
          type="success"
          size="small"
          >
          <b>下架</b>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
</template>
<script>
export default {
   name:'goodsEdit',
   data(){
    return{
    }
   },
   methods: {
    //下架某产品 
    // eslint-disable-next-line 
      deleteRow(index, rows) {
        // console.log(index);//当前商品id 从0开始
        let id=index+1
        // console.log(id);
        // console.log(rows);//goods数组
        // 发请求删除某产品
        this.$store.dispatch('deleteGoods',id)
      }
    },
    mounted(){
      // 发请求得到所有商品
      this.$store.dispatch('getGoods')
    },
    computed:{
      // 得到所有商品
      goods(){
        return this.$store.state.goods.goods
      }
    }
}
</script>